<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap-table插件的使用</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../js/bootstrap.js"></script>
    <script src="../../js/bootstrap-table.js"></script>
    <script src="../../js/sweetalert2.js"></script>
    <script src="../../sweetalert/AlertHelper.js"></script>
    <link rel="stylesheet" href="../../css/page.css">
    <script src="../../js/bootstrap/bootstrap-datepicker.min.js"></script>
    <script src="../../js/bootstrap/bootstrap-datepicker.zh-CN.min.js"></script>

</head>
<body>
<div class="wrapper">
    <div class="data-grid">
        <div class="form-breadcrumb">
            <span>通话列表</span>
        </div>
        <div class="form-field-box">
            <div class="form-inline">
                <label class="form-label">通话编号:</label>
                <div class="input-inline">
                    <input id="chatId" placeholder="通话编号" type="text" class="form-input" maxlength="50" onkeyup="this.value=this.value.replace(/[, ]/g,'')">
                </div>
            </div>
            <div class="form-inline">
                <label class="form-label">通话时长:</label>
                <div class="input-inline">
                    <select lay-filter="select" class="dropdown" id="duration" name="duration" style="text-align: center; text-align-last: center;">
                        <option value="">全部</option>
                        <option value="1">小于10秒</option>
                        <option value="2">10-30秒</option>
                        <option value="3">30-60秒</option>
                        <option value="4">60-180秒</option>
                        <option value="5">大于180秒</option>
                    </select>
                </div>
            </div>
            <div class="form-inline">
                <label class="form-label">统计时间从:</label>
                <div class="input-inline zane-calendar">
                    <input class="form-input" readonly id="startTime" placeholder="开始时间" value="" lay-key="1">
                </div>
                <div class="input-inline c-999">至</div>
                <div class="input-inline zane-calendarend">
                    <input class="form-input" readonly id="endTime" name="queryPaperRecord.endTime" placeholder="结束时间" value="" lay-key="3">
                </div>
            </div>
            <div class="form-inline">
                <a title="查询" class="form-btn form-btn-danger" onclick="query()" href="javascript:void(0)">查询</a>
                <a title="清空" href="javascript:void(0)" onclick="cleanquery()" class="form-btn form-btn-primary form-btn-pr-master">清空</a>
            </div>
        </div>
    </div>
</div>
<div class="data-grid">
    <div class="form-field-box">
        <table class="table" id="table"></table>
    </div>
</div>
<!--<div style="margin: 50px 50px 50px 50px; border: 1px solid black;">
    <table class="table" id="table"></table>
</div>-->

<!--
功能:
    模态框实例.
-->
<div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="categoryLabel">新增</h4>
            </div>
            <div class="modal-body" style="height: 400px">
                <div class="form-group">
                    <label for="id">id</label>
                    <input type="text" class="form-control" id="id" placeholder="id">
                </div>
                <div class="form-group">
                    <label for="sex">sex</label>
                    <input type="text" class="form-control" id="sex" placeholder="sex">
                </div>
                <div class="form-group">
                    <label for="name">name</label>
                    <input type="text" class="form-control" id="name" placeholder="name">
                </div>
            </div>
            <div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="btn" onclick="save()">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
<script>

    const alertHelper = new AlertHelper();

    $(() => {
        initTable();
        dateInputInit();
    });

    function dateInputInit() {
        $("#startTime").datepicker({
            format: 'yyyy-mm-dd',
            language: "zh-CN",
            todayBtn: 'linked',
            autoclose: true
        });
        $("#endTime").datepicker({
            format: 'yyyy-mm-dd',
            language: "zh-CN",
            todayBtn: 'linked',
            autoclose: true
        });
    }

    function queryParams(params) {
        let temp = {
            pageSize: params.limit,                         //页面大小
            pageNumber: (params.offset / params.limit) + 1   //页码
        };
        //将参数转换为json形式可以使用JSON.stringIfy(temp).
        return temp;
    }

    function initTable() {
        $('#table').bootstrapTable({
            /*
            注意:
                1. url请求返回的数据格式必须符合{total: 总数, rows: 数据}这种格式, 否则数据无法展示.
                2. 如果请求携带的参数需要是json格式, 就在queryParams中使用JSON对象进行转换即可.
            */
            url: 'http://localhost/json/view6', //请求后台的URL（*）
            method: 'post', //请求方式（*）
            //toolbar : '#toolbar', //工具按钮用哪个容器
            // striped: false, //是否显示行间隔色
            contentType: 'application/x-www-form-urlencoded',
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //是否显示分页（*）
            sortable: false, //是否启用排序
            sortOrder: "asc", //排序方式
            queryParams: queryParams,//传递参数（*）
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 3, //每页的记录行数（*）
            pageList: [3, 25, 50, 100], //可供选择的每页的行数（*）
            search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            showColumns: false, //是否显示所有的列
            showRefresh: false, //是否显示刷新按钮
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: true, //是否启用点击选中行
            //height: $(window).height()/2 - 700, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            showToggle: false, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            trimOnSearch: true,//设置为 true 将自动去掉搜索字符的前后空格。
            paginationDetailHAlign: 'left',
            paginationHAlign: 'left',
            onClickRow: function(row, $element, field) {
                $('.info').removeClass('info');
                $($element).addClass('info');
            },
            onLoadSuccess: function (data) {
                let trs = $('tbody tr');
                $.each(trs, function (index, value) {
                    let trElement = $(value);
                    let dataIndex = trElement.attr('data-index');
                    let sex = trElement.children()[2];
                    if(sex !== 'undefined') {
                        let sexNumber = $(sex).text();
                        if(sexNumber === '1') {
                            trElement.on('mouseover', function () {
                                trElement.css('cursor', 'pointer');
                                console.log('鼠标进来了');
                            });
                            trElement.on('mouseout', function () {
                                trElement.css('cursor', 'default');
                                console.log('鼠标出去了');
                            });
                            trElement.on('click', function () {
                                console.log('点击事件触发了', data.rows[parseInt(dataIndex)].id);
                            });
                        }
                    }
                });
            },
            columns: [{
                checkbox: true,
                visible: true
            }, {
                field: 'id',
                title: 'id值',
                width: '5%'
            }, {
                field: 'sex',
                title: '性别',
                width: '5%'
            }, {
                field: 'sumOld',
                title: '总年龄',
                width: '5%'
            }, {
                field: 'avgOld',
                title: '平均年龄',
                width: '5%'
            }, {
                field: 'startDate',
                title: '开始时间',
                width: '20%'
            }, {
                field: 'endDate',
                title: '结束时间',
                width: '20%'
            }, {
                field: '',
                title: '操作',
                width: '40%',
                //控制title显示居中
                titleAlign: 'center',
                isResize: true,
                formatter: operateFormatter,
                events: operateEvents
            }]
        });
    }

    /**
     * 功能:
     *      给列添加格式化函数.
     * 说明:
     *      1. row表示本行数据, 可以用`row.类名称`这样获取指定列的值;
     */
    function operateFormatter(value, row, index) {
        return [
            '<div class="btn-group">',
            '<button id="btnEditPicGroupDetail" type="button" class="btn btn-default"  singleSelected=true>修改</button>',
            //可以使用三元表达式来控制那些按钮显示, 那些按钮不显示
            row.sex > 1 ? '<button id="btnUpMove" type="button" class="btn btn-default" singleSelected=true>上移</button>' : '',
            '<button id="btnDownMove" type="button" class="btn btn-default" singleSelected=true>删除</button>',
            '<button id="detail" type="button" class="btn btn-default" singleSelected=true>详情</button>',
            '<button id="go" type="button" class="btn btn-default" singleSelected=true>跨页面传值</button>',
            '</div>'
        ].join('');
    }

    //通过jquery获取的dom元素
    let idInput = $('#id');
    let sexInput = $('#sex');
    let startDateInput = $('#name');

    window.operateEvents = {
        /**
         * 功能:
         *      通过按钮的id添加事件函数.
         * 说明:
         *      1. row代表本行的值, index表示当前页的第几条数据
         */
        "click #btnEditPicGroupDetail": function (e, value, row, index) {
            console.log(row.id, index);
        },
        "click #btnDownMove": function (e, value, row, index) {
            if (row.sex > 1) {
                alertHelper.success("成功删除");
            } else {
                alertHelper.error("删除失败");
            }
        },
        "click #detail": function (e, value, row, index) {
            idInput.val(row.id);
            sexInput.val(row.sex);
            startDateInput.val(row.startDate);
            $("#categoryModal").modal('show');
        },
        "click #go": function (e, value, row, index) {
            localStorage.setItem("table-pluds-id", row.id);
            window.location.href = "./go.html";
        }
    };

    function save() {
        console.log(idInput.val(), sexInput.val(), startDateInput.val());
        let code = 300;
        //模拟ajax请求后台进行保存.
        if (sexInput.val() > 1) {
            code = 200;
        }
        if (code === 200) {
            //保存成功是执行的逻辑
            $("#categoryModal").modal('hide');
            alertHelper.success("保存成功");
        } else {
            //保存失败时获取的逻辑
            alertHelper.error("保存失败");
        }
    }

</script>
</html>